<template>
  <div style="display: flex">
    <c-upload
      ref="uploadFile"
      v-bind="$attrs"
      :file-list="fileList"
      :action="action"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :headers="headers"
      :limit="limit"
      :show-file-list="false"
      :on-exceed="handleExceed"
      :accept="accept"
      list-type="picture-card"
      v-on="$listeners"
    >
      <i class="el-icon-plus"></i>
      <slot name="tip" slot="tip"></slot>
    </c-upload>
    <FileView
      class="FileView"
      mode="edit"
      :fileList="fileList"
      @remove="handleRemove"
    ></FileView>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import FileView from './FileView.vue'
export default {
  name: 'upload',
  components: {
    FileView
  },
  props: {
    accept: {
      type: String,
      default: '.jpg,.jpeg,.png,.pdf,.PDF,.doc,.docx,.mp4,.mp3,.ppt,.xlsx,.pptx'
    },
    limit: {
      type: Number,
      default: 5
    },
    files: {
      type: Array,
      default() {
        return []
      }
    },
    maxsize: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      action: '/api/sys/file/upload'
    }
  },
  computed: {
    ...mapGetters('user', ['accessToken']),
    headers() {
      return {
        // accessToken: this.accessToken
      }
    },
    fileList: {
      get: function () {
        return this.files
      },
      // 数据变化时自动调用set方法
      // 现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
      set: function (value) {
        this.$emit('update:files', value)
      }
    },
    isAudioImg() {
      return require('./images/AUDIO.png')
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
    },

    handleSuccess(response, file, fileList) {
      if (response.success) {
        file.url = response.data?.url
        this.fileList = fileList.filter((item) => item.response.success)
        this.$emit('uploaded')
      } else {
        let idx = fileList.findIndex((item) => item.uid === file.uid)
        this.$refs.uploadFile.uploadFiles.splice(idx, 1)
        this.$message({
          type: 'error',
          message: response.message
        })
      }
    },
    beforeUpload(file) {
      const isLimit = file.size / 1024 / 1024 <= this.maxsize
      if (!isLimit) {
        this.$message.error({
          message: `上传文件超过最大限制 ${this.maxsize} M`,
          customClass: 'mzindex'
        })
      }
      return isLimit
    },
    handleExceed() {
      this.$message.error({
        message: `最多可上传${this.limit}个文件，已超过限制`,
        customClass: 'mzindex'
      })
    },
    handleError() {
      this.$message.error({
        message: `文件上传失败`,
        customClass: 'mzindex'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-upload-list {
  .el-upload-list__item {
    position: relative;
    text-align: center;
  }
  .file-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: $--color-primary;
    font-size: 30px;
  }
}
.FileView {
  margin-left: 8px;
}
</style>
